<template>
  <div>
    <div class="gva-search-box">
      <el-form ref="searchForm" :inline="false" :rules="rules" :model="searchInfo">
        <el-form-item label="奖励比例" prop="reward">
          <div class="fl">
            <el-input v-model="searchInfo.reward" placeholder="奖励比例" />
            <span class="unit">%</span>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(searchForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { financialReward } from "@/api/subscribe";
import { ElMessage } from "element-plus";
const rules = ref({
  reward: [{ required: true, message: "请输入奖励比例", trigger: "blur" }]
});
const searchInfo = ref({
  reward: ""
});
const searchForm = ref();
onMounted(() => {
  getDetail();
});
const getDetail = () => {
  financialReward().then(response => {
    if (response.code === 200) {
      searchInfo.value.reward = response.data.reward;
    }
  });
};
const onSubmit = searchForm => {
  let params = {
    rider_cost: searchInfo.value.reward
  };
  searchForm.validate(async valid => {
    if (valid) {
      financialReward(params).then(response => {
        if (response.code === 200) {
          ElMessage({
            message: "设置成功",
            type: "success"
          });
        }
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.gva-search-box {
  .el-form {
    width: 60%;
  }
}
.fl {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.unit {
  margin-left: 10px;
}
</style>